<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="gly"%>
<html>
<head>
<meta charset="GB18030">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/static/css/font-awesome.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/static/css/main.css">
</head>
<body style="margin-top: -50px">
<ol class="breadcrumb">
				  <li><a href="${pageContext.request.contextPath}/daily/break.jsp">车辆违章</a></li>
				  <li class="active">查看图片</li>
				</ol>
<div class="container-fluid">
<div class="row">
<gly:forEach items="${list}" var="list">
  <div class="col-sm-4 col-md-3">
    <div class="thumbnail">
      <img src="${pageContext.request.contextPath}/${list.bpFilename}" alt="a" >
      <div class="caption">
        <h3>${list.bpDesc}</h3>
        <p>
        <a href="javascript:showPicture('${list.bpFilename}')" class="btn btn-primary" role="button" >显示大图</a> 
        <a href="${pageContext.request.contextPath}/break/delPicture?bpId=${list.bpId}&brId=${list.brId}" class="btn btn-danger" role="button">删除</a>
        </p>
      </div>
    </div>
  </div>
  </gly:forEach>
</div>
<div class="row">
<div class="col-md-3">
<button type="button" class="btn btn-success" id="b1"><span class="glyphicon glyphicon-plus"></span>添加图片</button>
</div>

</div>
<div class="row">
<div class="col-md-6" style="margin-top: 20px;display: none;" id="d1" >
<form action="${pageContext.request.contextPath}/break/uploadPicture?brId=${brId}" method="post" enctype="multipart/form-data">
  
  <div class="form-group">
    <label for="exampleInputbp_desc">图片描述</label>
    <input type="text" class="form-control" id="exampleInputbp_desc" name="bpDesc" placeholder="请输入图片描述" required>
  </div>
  <div class="form-group">
    <label for="exampleInputFile">选择图片</label>
    <input type="file" id="exampleInputFile" name="breakimg" single accept="image/gif,image/png,image/jpg,image/jpeg">
    <p class="help-block">请选择上传图片</p>
  </div>
  <button type="submit" class="btn btn-info">上传图片</button>
</form>
</div>
</div>
</div>
<!-- 显示大图模态框 -->

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="myModal">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content" id="img_div">
    </div>
  </div>
</div>
<script
		src="${pageContext.request.contextPath}/static/jquery/jquery-2.1.1.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/static/script/docs.min.js"></script>
		<script type="text/javascript">
		$(function(){
			$("#b1").click(function(){
				$("#d1").css("display","");
			})
		})
		</script>
		
		<script type="text/javascript">
		function showPicture(fileName){
			var str="<img src='${pageContext.request.contextPath}/"+fileName+"' alt='a' width='880px' style='margin: 20px auto;margin-left: 10px;'>";
			$("#img_div").html(str);
			$('#myModal').modal('show');
		}
		</script>
</body>
</html>